<template>
	<view>
		<u-popup v-model="popupCard" mode="center" border-radius="20" @close="close">
			<view class="popup">
				<view class="pop-title flex-row justify-center">
					兑换码
				</view>
				<view class="flex-row justify-between">

					<view class="pop-card-num flex-row justify-center items-center">
						<input type="text" v-model="cardCode" placeholder="输入兑换码" placeholder-class="pop-placeholder"
							class="pop-input" />
					</view>
				</view>
				<view class="pop-bottom flex-row justify-between">
					<view @click="submit" class="pop-bt-btn1">
						确定
					</view>
					<!-- <view v-if="isLoading" class="pop-bt-btn1">
						确定
					</view> -->
					<view @click="close" class="pop-bt-btn2">
						取消
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	export default {
		props: {
			// isLoading: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		data() {
			return {
				popupCard: false,
				cardCode: '', //兑换码
			}
		},
		methods: {
			open() {
				this.popupCard = true;
			},
			close() {
				this.popupCard = false;
				this.cardCode = '';
			},
			submit() {
				if (this.cardCode == '') {
					uni.showToast({
						title: '兑换码不能为空',
						icon: 'none'
					})
					return
				}
				this.$emit('submit', this.cardCode)
			}
		}
	}
</script>
<style>
	@import "../../static/css/common.css";
</style>
<style lang="scss" scoped>
	/* 弹窗 */
	.popup {
		padding: 50rpx 30rpx 77rpx;
		background-image: linear-gradient(0deg, $white-color 0%, $popup-top-bg-white 100%);
		border-radius: 20rpx;
		width: 552rpx;
	}

	.pop-title {
		margin-left: 7rpx;
		color: #333333;
		font-size: 36rpx;
		font-family: Adobe Heiti Std;
		line-height: 34rpx;
		margin-bottom: 20rpx;
	}

	.pop-card-type {
		padding: 32rpx 54rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 92rpx;
	}

	.pop-input {
		width: 80%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
		text-align: center;
	}

	.pop-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
	}

	.pop-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
		margin-right: 6rpx;
	}

	.pop-card-num {
		padding: 32rpx 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		width: 100%;
		height: 92rpx;
	}

	.pop-down-icon {
		width: 14rpx;
		height: 9rpx;
	}

	.pop-xiaohao {
		margin-left: 20rpx;
		margin-top: 37rpx;
		color: #666666;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 29rpx;
	}

	.pop-bottom {
		margin-top: 48rpx;

	}

	.pop-bt-btn1 {
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 34rpx;
		width: 227rpx;
		height: 68rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 68rpx;
		color: #ffffff;
		text-align: center;
	}

	.pop-bt-btn2 {
		// background-color: #ffffff;
		border-radius: 34rpx;
		width: 227rpx;
		height: 68rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 68rpx;
		// color: #9da4b1;
		color: $theme-color;
		border: 1rpx solid $theme-color;
		text-align: center;
	}
</style>